<template>
	<view class="book flex">
		<!-- <template v-if="cover">
			<image
				class="book-cover"
				:src="cover"
			></image>
		</template>
		<template v-else>
			<view class="book-cover flex-row-center overflow-hidden">
				{{name}}
			</view>
		</template> -->
		<book-cover
			:cover="cover"
			:empty="coverEmpty"
			:title="name"
		></book-cover>
		<view class="book-content flex-1">
			<view
				v-if="name"
				class="name"
			>
				{{name}}
			</view>
			<view
				v-if="author"
				class="text"
			>
				{{author}}
			</view>
			<view
				v-if="isbn"
				class="text"
			>
				{{isbn}}
			</view>
			<view
				v-if="pv"
				class="text"
			>
				借阅{{pv}}次
			</view>
			<view
				v-if="location"
				class="text"
			>
				{{location}}
			</view>
		</view>
		<view class="book-rignt flex items-center">
			<slot name="right" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cover: {
				type: String,
			},
			name: {
				type: String,
				// default: "书名"
			},
			author: {
				type: String,
				// default: "作者"
			},
			isbn: {
				type: String,
				// default: "978-7-5022-8239-4"
			},
			pv: {
				type: Number | String,
				// default: 12
			},
			location: {
				type: String,
				// default: "6053；TU/TS272"
			},
			coverEmpty: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {

		},
	}
</script>

<style lang="scss">
	.book {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		&-cover {
			width: 184rpx;
			height: 256rpx;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);

			writing-mode: vertical-lr;
			flex-shrink: 0;
		}

		&-content {
			margin-left: 24rpx;

			.name {
				font-weight: 500;
				font-size: 36rpx;
				color: #262626;
			}

			.text {
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #6C7A94;
			}
		}

		&-right {
			flex-shrink: 0;
		}
	}
</style>